<template>
  <div class="congestion">
    <div v-for="index of 5" :class="['level_'+index]" :key="index" :style="{color:congestionLevels[index-1]['color'] }">
      <template v-if="index == currentIndex">
        <div class="value">{{ value }}</div>
        <div class="label">{{ congestionLevels[index -1].label }}</div>
      </template>
    </div>
  </div>
</template>
<script setup>
import { ref, defineProps, watch } from 'vue';
const currentIndex = ref(-1);
const props = defineProps({
  value: {
    type: Number,
    required: true
  }
});

watch(() => props.value, v => {
  if (v !== undefined) {
    currentIndex.value = Math.floor(v / 5) + 1;
  }
});

const congestionLevels = ref([
  {
    label: '缓行',
    value: 5,
    color: '#20bfd8'
  },
  {
    label: '缓行',
    value: 10,
    color: '#3cb5db'
  },
  {
    label: '缓行',
    value: 15,
    color: '#39b799'
  },
  {
    label: '缓行',
    value: 25,
    color: '#925c38'
  },
  {
    label: '缓行',
    value: 30,
    color: '#7d3b3b'
  }
]);
</script>
<style lang="less" scoped>
.congestion {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.congestion > div {
  width: 20%;
  height: 1rem;
  position: relative;
}
.level_1 {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(85, 170, 183, 0.8) 42%,
    #20bfd8 100%
  );
}
.level_2 {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(65, 153, 180, 0.8) 42%,
    #3cb5db 100%
  );
}

.level_3 {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(60, 167, 142, 0.8) 42%,
    #39b799 100%
  );
}
.level_4 {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(204, 134, 88, 0.8) 42%,
    #925c38 100%
  );
}
.level_5 {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(187, 82, 82, 0.8) 42%,
    #7d3b3b 100%
  );
}

.value,
.label {
  height: 1.5rem;
  line-height: 1.5rem;
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
}
.value {
  top: -1.5rem;
}
.label {
  bottom: -2rem;
  color: rgba(255, 255, 255, 0.85);
}
</style>
